<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>挖矿详情</title>
    <link rel="stylesheet" href="../../css/reset.css" />
    <style>
        body {
            width: 100%;
            height: auto;
            background-color: rgba(0, 0, 0, 0.4);
            font-family: PingFangSC-Regular, sans-serif;
            color: #333333;
            font-size: 0.28rem;
        }

        header {
            width: 100%;
            height: auto;
        }

        header ul {
            width: 100%;
            box-sizing: border-box;
            height: 1.1rem;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.29rem;
        }

        header ul li {
            height: 1rem;
            line-height: 1rem;
            text-align: center;
        }

        header ul li:last-of-type {
            width: auto;
            padding-right: 0.3rem;
            color: #B3B3B3;
            font-size: 0.28rem;
        }

        header ul li:first-of-type {
            width: auto;
            padding-right: 0.3rem;
        }

        .chooseSattus ul {
            width: 100%;
            box-sizing: border-box;
            padding: 0 0.3rem;
        }

        .chooseSattus ul li {
            height: 0.96rem;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #E5E5E5;
        }
    </style>
</head>

<body id="test">
    <div
        style="width: 100%;height: auto; background-color:#ffffff;position: fixed;bottom: 0;left: 0;border-radius: 0.2rem 0.2rem 0 0;">
        <header>
            <ul>
                <li style="visibility: hidden;">
                    占位
                </li>
                <li style="font-size: 0.29rem;">
                    确认购买
                </li>
                <li class="closeDalog">
                    关闭
                </li>
            </ul>
        </header>
        <div class="chooseSattus">
            <ul>
                <li data-value="chooseitem">
                    <span>
                        单价
                    </span>
                    <span class="coinPrice">
                    </span>
                </li>
                <li class="choosePower" data-value="1">
                    <span>
                        数量
                    </span>
                    <span class="coinNumebr">
                    </span>
                </li>
                <li class="choosePrice" data-value="1">
                    <span>
                        实付款
                    </span>
                    <span class="totalPrice" style="color:#F95858;">
                    </span>
                </li>
            </ul>
        </div>
        <p
            style="width:100%;font-size: 0.24rem;box-sizing: border-box;padding: 0.29rem 0.19rem 0.44rem 0.31rem;line-height: 0.48rem;color: #595959;">
            <span style="color: #262626;">
                提示:
            </span><br>
            1.第三方OTC充值成功后，将发放至您余额资产中。<br>
            <span style="color: #F86666;">
                2.余额资产和余额(OTC)资产为两个独立账户，金额不互通。
            </span><br>
            3.请您务必准确填写卡主姓名(转账卡主/支付宝认证姓名)，以确保充值成功。<br>
            4.建议充值时间为 9:00-21:00
        </p>
        <button id="goBuyCoin"
            style="width:6.9rem;height:0.7rem;background:rgba(255,210,3,1);border-radius:0.1rem;border: none;outline: none;margin-left: calc((100% - 6.9rem) / 2);margin-bottom:0.6rem;font-size: 0.28rem;">
            确认购买
        </button>
    </div>
</body>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/app.js"></script>

<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        $(".closeDalog").on("click", function () {
            app.closeF();
        })
        $(".coinPrice").text(api.pageParam.coinPirce + " CNY/CNY");
        $(".coinNumebr").text(api.pageParam.coinNumber + "CNY");
        var totalPrice = Number(app.accMul(api.pageParam.coinPirce, api.pageParam.coinNumber));
        var numberNew = Math.ceil(totalPrice * 100) / 100;
        $(".totalPrice").text("¥" + numberNew);
        $("#goBuyCoin").on("click", function () {
            app.ajaxPro({
                url: "otc/pay",
                values: {
                    token: account.token,
                    amount: api.pageParam.coinNumber,
                    username: api.pageParam.userName,
                    pay_channel: "OTC_CNY"
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    var goCerfition = {
                        name: "browser",
                        subpage: "common/browser",
                        title: "在线支付",
                        param: {
                            pageName: "browser",
                            url: ret.data,
                            isThreePay: true
                        }
                    }
                    app.setNavBarAttr(goCerfition);
                } else {
                    app.toast(ret.message);
                }
            })
        })
    }
</script>

</html>